<template>
    <div id="taps">
   <div class="columns">
        <div class="column">

            <!--<tabs type="toggle" :is-full-width="false">-->
                <!--<div v-for="item in author">222-->
                <!--<tab-item  :label="item.title" icon="image"></tab-item>-->
                <!--</div>-->
            <!--</tabs>-->
            <vc-taps type="toggle" :is-full-width="false">
                <vc-item v-for="item in author"  :label="item.title" :toroute="item.index" :menueCodes="item.menueCodes" icon="image"></vc-item>
            </vc-taps>
        </div>
   </div>
    </div>
</template>
<script>
    import * as cTap from '../../components/common/tab';
    const vcTaps = cTap.vTabs;
    const vcItem = cTap.vTabItem;
    export default{
        components: {
            vcTaps,vcItem
        },
        data:function () {
            return {
                tapsNames:this.$store.state.titles
            }
        },
        computed: {
            author () {

                return this.$store.state.titles;
            },
            update(){
                return true;
            }
        }
    }
</script>
<style>
    #taps{
        position: fixed;
        width: 100%;
        height: 40px;
        background-color: #e0e0e0;
        z-index: 999;
    }

    .tabs.is-layout-top {
      flex-direction: row;
    }

    #taps .tabs.is-toggle li.is-active .close-icon {
        color: #cacaca;
    }
    #taps .tabs.is-toggle li.is-active a{
        background-color: #fff;
        color:#fc5252;
    }
    #taps .tabs.is-toggle li.is-active i{
        background-color: #fff;
        color :#fc5252!important;
    }
    .tabs.is-toggle li{
        width: 110px;
    }
    .tabs.is-toggle li a{
      border: none;
    }

    .tabs.is-toggle li.is-active{
      /*border-color: #3c81df;*/
      /*border-bottom: 1px solid red;*/
    }

    .tabs.is-toggle li:hover{
      background: #dbdbdb;
      border-left: 1px solid #cacaca;
      border-right: 1px solid #cacaca;
    }

    .tabs.is-toggle li+li{
      margin-left: 0;
    }
    .tabs .tab-list li {
        line-height: 30px;
    }


    .tab-list{
      margin: 0 !important;
    }

    .columns {
        margin-top: 0;
        margin-left: 0;
    }

    .column {
        padding: 0;
    }

    .tab-content{
      margin: 0 !important;
      background: #dbdbdb;
    }



</style>
